import React from 'react';
import { Result, Button } from 'antd';
import { MainStructures } from '@zny/layouts';

export default class ErrorWrapper extends React.Component {
  state = { hasError: false, errMsg: '' };

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true, errMsg: error.message };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.error(error);
    console.error(errorInfo);
  }

  render() {
    const { hasError, errMsg } = this.state;
    if (hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return (
        <MainStructures>
          <Result
            status="500"
            title="Oops，页面出现了错误，请联系管理员"
            subTitle={`${errMsg || 'error'}`}
            extra={[
              <Button
                type="primary"
                key="refresh"
                onClick={() => {
                  location.reload();
                }}
              >
                刷新重试
              </Button>,
            ]}
          />
        </MainStructures>
      );
    }
    return this.props.children;
  }
}
